<!-- 本页数据在57行 -->
<template>
  <div>
    <el-card class="optionTable" shadow="hover">
      <div>
        <el-col>
          <span style="margin-right:10px">专业</span>
          <el-radio-group v-model="tableOptions.majorChoice" size="large">
            <el-radio-button v-for="item in majorTable" :key="item.value" :label="item.label" :value="item.value"
              @click="handleChange" />
          </el-radio-group>
        </el-col>
      </div>

      <div>
        <el-col>
          <span style="margin-right:10px">职业</span>
          <el-radio-group v-model="tableOptions.jobChoice" size="large">
            <el-radio-button v-for="item in jobTable" :key="item.value" :label="item.label" :value="item.value"
              @click="handleChange" />
          </el-radio-group>
        </el-col>
      </div>

    </el-card>

    <el-card class="optionTable" shadow="hover">
      <h3>筛选结果</h3>
      <el-row :gutter="20">
        <el-col :span="22" style="padding: 0px;margin: 0;">
          <div v-for="data in list" :key="data.id" style="padding:10px;">
            <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="handleChangepage(data.id)">
              <div style="padding: 14px;float:left;">
                <span>{{ data.title }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>

    

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useStore } from 'vuex'
import axios from 'axios'
import router from '@/router';

const store = useStore()

let list = ref([])
list.value = [
    {
        id:1,
        title:"就业1",
        content:"就业1",
        category:"1",
        author:"1",
        job:"job1",
        major:"major1"
    },
    {
        id:2,
        title:"面试1",
        content:"面试1",
        category:"2",
        author:"2",
        job:"job1",
        major:"major1"
    },
    {
        id:3,
        title:"简历1",
        content:"简历1",
        category:"3",
        author:"3",
        job:"job2",
        major:"major2"
    }
  ]
const majorTable = [
  { label: '不限', value: '' },
  { label: '专业1', value: 'major1' },
  { label: '专业2', value: 'major2' }
];

const jobTable = [
  { label: '不限', value: '' },
  { label: '职业1', value: 'job1' },
  { label: '职业2', value: 'job2' }
];


let tableOptions = reactive({
  majorChoice: '',
  jobChoice: ''
});

const handleChange = () => {
  setTimeout(function () {
    getData();
  }, 10);
  // setTimeout({getData}, 10);

}

const getData = async () => {

  // showData = {

  // }

  // store.commit("changeCarList", showData)
  // store.commit("changeTableOptions", tableOptions)


  // router.push("/carFilter1")


};







</script>

<style scoped>
.optionTable {
  margin: 30px;
}

.el-col {
  margin: 10px
}

.image {
  width: 100%;
  height: 200px;
  background-size: cover;
}

.image-preview {
  width: 70%;
  height: 280px;
  background-size: cover;
}
</style>